<template>
  <a-modal
    destroyOnClose
    :visible="visible"
    title="导入数据"
    @update:visible="update"
    @ok="ok"
  >
    <a-steps :current="current">
      <a-step v-for="(item, v) in steps" :key="v">
        <template #icon v-if="waiting && v == current">
          <loading-outlined />
        </template>
        <template #title>
          <span class="fs_14">{{ item.title }}</span>
        </template>
        <template #description>
          <span class="fs_12">{{ item.description }}</span>
        </template>
      </a-step>
    </a-steps>
    <!-- 导入前 -->
    <div class="m_box mt_20">
      <div class="m1" v-if="current == 0">
        <a-form>
          <a-form-item label="所属分类">
            <SelectDict
              :value="dictId"
              dictId="1"
              style="width: 220px"
              @update:value="(e) => (dictId = e)"
            />
          </a-form-item>
        </a-form>
        <ul class="m1_box">
          <li>
            <p>下载模板</p>
            <p>
              点击下方文字按钮，下载模版，并按照规定格式填写数据，每次填写数据总和不超过10000条
            </p>
            <p class="down" @click="download">
              <cloud-download-outlined />
              <a>下载模板</a>
            </p>
          </li>
          <li>
            <p>上传文件</p>
            <p>上传文件格式仅支持xls，xlsx，且文件大小不得超过5M</p>
            <p class="down" v-if="!dictId" @click="message.error('请选择所属分类')">
              <cloud-download-outlined />
              <a>上传文件</a>
            </p>
            <a-upload v-else :max-count="1" :customRequest="customRequest">
              <p class="down">
                <cloud-download-outlined />
                <a>上传文件</a>
              </p>
            </a-upload>
          </li>
        </ul>
      </div>
      <!-- 导入中 -->
      <div class="m2" v-if="current == 1">
        <a-spin />
      </div>
      <!-- 导入后 -->
      <div class="m3" v-if="current == 2">
        <a-result status="success" />
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineProps, toRefs, defineEmits, watch, getCurrentInstance } from "vue";
import { steps } from "./href";
import { message } from "ant-design-vue";
import { keywordsApi } from "@/api";
import SelectDict from "@/components/SelectDict";
const app = getCurrentInstance();
const $this = app.appContext.config.globalProperties; //全局变量
const emits = defineEmits(["update:visible", "reload"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
const { visible } = toRefs(props);
const current = ref(0);
const waiting = ref(false);
const dictId = ref(null);
const fileList = ref([]);

watch(visible, (e) => {
  if (e) {
    current.value = 0;
  } else {
    emits("reload");
  }
});
watch(current, (e) => {
  if (e == 1) {
    waiting.value = true;
    setTimeout(() => {
      current.value = 2;
      waiting.value = false;
    }, 2000);
  }
});

function update(e) {
  emits("update:visible", e);
}
function ok() {
  emits("update:visible", false);
}
function customRequest(e) {
  const { file, onSuccess, onError } = e;

  keywordsApi
    .import({
      file,
      dict_id: dictId.value,
    })
    .then((res) => {
      onSuccess();
      current.value = 1;
    })
    .catch((err) => {
      onError();
      message.error("上传失败");
    });
}

function download() {
  $this.$download("pictureImport.txt", "图片导入模板");
}
</script>

<style lang="less" scoped>
.m_box {
  min-height: 200px;
}
.m1 {
  .m1_box {
    li {
      background: rgba(245, 247, 250, 0.5);
      border-radius: 4px;
      border-left: @primary-color solid 10px;
      padding: 20px 10px;
      font-size: 12px;
      &:first-child {
        margin-bottom: 20px;
      }
      .down {
        color: @link-color;
        font-size: 12px;
        a {
          margin-left: 5px;
        }
      }
    }
  }
}
.m2 {
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}
</style>
